<template>
  <countTo :start-val="0" :end-val="roll.number" :decimals="roll.decimals" :separator="separator" :prefix="prefix" :suffix="roll.suffix" :duration="duration" />
</template>

<script>
import CountTo from 'vue-count-to';
export default {
  components: {
    CountTo
  },
  props: {
    // 滚动到的数值
    number: {
      type: Number,
      default: 0
    },
    // 滚动时长,毫秒
    duration: {
      type: Number,
      default: 1200
    },
    // 分隔符
    separator: {
      type: String,
      default: ','
    },
    // 前缀
    prefix: {
      type: String,
      default: ''
    },
    isMoney: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      roll: {
        number: 0,
        decimals: 0,
        suffix: ''
      }
    };
  },
  watch: {
    number() {
      this.formatNumber();
    }
  },
  created() {
    this.formatNumber();
  },
  methods: {
    formatNumber() {
      let decimals = 0;
      let suffix = '';
      let num = this.number;
      if (this.isMoney) {
        decimals = 2;
      } else {
        if (num >= 100000000) {
          num = num / 10000000 / 10;
          suffix = '亿';
        } else if (num >= 10000) {
          num = num / 1000 / 10;
          suffix = '万';
        }
        num = Math.floor(num * 100) / 100;
        num = parseFloat(num);

        if (!Number.isInteger(num)) {
          // var y = String(num).indexOf('.') + 1; // 获取小数点的位置
          // decimals = String(num).length - y; // 获取小数点后的个数
          decimals = 1;
        }
      }
      this.roll = {
        number: num,
        decimals: decimals,
        suffix: suffix
      };
    }
  }
};
</script>

<style></style>
